<template>
  <div class="scorll-view">
    <HeaderTop :title="pageTitle">
      <template slot="left">
        <van-icon name="search" @click="goSearch" />
      </template>
      <template slot="right">
        <van-icon  class="user-circle-o" v-if="$store.state.userInfo._id" name="user-circle-o" @click="goPersonal"/>
        <span v-else class="login-btn" @click="goLogin">登录|注册</span>
      </template>
    </HeaderTop>

    <!-- 商品分类轮播 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="#f18010"
      v-if="categoryList.length"
      lazy-render
    >
      <van-swipe-item v-for="item in count" :key="item">
        <div
          class="shop-item"
          v-for="(it, index) in categoryList"
          :key="index"
          v-if="index + 1 > (item - 1) * size && index + 1 <= item * size"
          @click="handlerShopItem(it)"
        >
          <img :src="img_base_url+it.image_url" :alt="it.title" />
          <p>{{ it.title }}</p>
        </div>
      </van-swipe-item>
    </van-swipe>
    <img v-else src="@/assets/images/msite_back.svg" alt="骨架屏">

    <!-- 店家列表 -->
    <div class="menu">
      <van-icon name="shop-o" />
      <span>附近商家</span>
    </div>
    <van-list
      :loading="loading"
      v-if="storeList.length"
    >
      <van-cell v-for="(item,index) in storeList" :key="index" @click="goStoreDetail(item)">
        <!-- 数据加载中的图片路径不对 -->
        <!-- <img class="left_img" :src="base_url+item.image_path" :alt="item.name"> -->
        <img class="left_img" src="@/assets/images/shop/default1.webp" :alt="item.name">
        <div class="center_info">
          <div class="title">
            <p class="icons">品牌</p>
            <span>{{item.name}}</span>
          </div>
          <div class="rate">
            <span>{{item.rating}}分</span>
            <img v-for="(imgurl, ins) in imgPath(item.rating)" :key="ins" :src="imgurl" alt="star">
          </div>
          <p class="play">
            ￥{{item.float_minimum_order_amount}}起送&nbsp;/&nbsp;{{item.piecewise_agent_fee.tips}}
            &nbsp;&nbsp;
            {{item.opening_hours[0].split('/').join(' - ')}}</p>
        </div>
        <div class="right_protected">
          <div class="top">
            <span v-for="it in item.supports" :key="it.id" :style="{color:'#'+it.icon_color}">{{it.icon_name}}</span>
          </div>
          <div class="midlle" :style="{color:'#'+item.color}">{{item.delivery_mode.text}}</div>
          <div class="bottom">
            月售:{{item.recent_order_num}}</div>
        </div>
      </van-cell>
    </van-list>
    <ul
      v-else
    >
      <li v-for="item in 6" :key="item">
        <img src="@/assets/images/shop_back.svg" alt="骨架屏">
      </li>
    </ul>
  </div>
</template>

<script>
import on from '@/assets/stars/star24_on@2x.png'
import half from '@/assets/stars/star24_half@2x.png'
import off from '@/assets/stars/star24_off@2x.png'

import { getAdressApi, getCategoryApi, getStoreApi } from "@/api/Home/index.js"
export default {
  name: 'Home',
  data() {
    return {
      pageTitle: '首页',
      // 食品分类一页显示个数
      size: 8,
      // 列表是否加载
      loading: false,
      // 经度
      latitude: '40.10038',
      // 纬度
      longitude: '116.36867',
      // 经纬度获取到的位置信息
      addressDate: {},

      // 食品分类图片的基地址
      img_base_url: 'https://fuss10.elemecdn.com',
      // 食品分类列表
      categoryList: [],

      // 商家图片的基地址
      base_url: 'http://cangdu.org:8001/img/',
      // 商家列表
      storeList: []

      // categoryList: [
      //   {
      //     image_url: require('@/assets/images/nav/1.jpg'),
      //     title: '炸食'
      //   },
      //   {
      //     image_url: require('@/assets/images/nav/2.jpg'),
      //     title: '甜品'
      //   }
      //   、、、、、、
      // ],
    }
  },
  computed: {
    count() {
      return (
        parseInt(this.categoryList.length / this.size) +
        (this.categoryList.length % this.size === 0 ? 0 : 1)
      )
    }
  },
  created() {
    this.getAdress()
    this.getCategory()
  },
  methods: {
    //  获取食品分类列表
    async getCategory() {
      const res = await getCategoryApi()
      if(res.status === 200) {
        this.categoryList = res.data.data
      }
    },
    //  获取地址
    async getAdress() {
      const res = await getAdressApi({
        latitude: this.latitude,
        longitude: this.longitude
      })
      if(res.status === 200) {
        this.addressDate = res.data.data
        this.pageTitle = this.addressDate.address + this.addressDate.name

        await this.getStore()
      }
    },
    // 获取附近商家信息
    async getStore() {
      this.loading = true
      const res = await getStoreApi({
        latitude: this.latitude,
        longitude: this.longitude
      })
      // console.log('storeList:',res)
      if(res.status === 200) {
        this.storeList = res.data.data
        this.loading = false
      }
    },
    // 搜索
    goSearch() {
      this.$router.push('/search')
    },
    // 去登陆
    goLogin() {
      this.$router.push('/login')
    },
    // 去我的模块
    goPersonal() {
      this.$router.push('/personal')
    },
    goStoreDetail(item) {
      console.log('item:',item.name)
      this.$router.push('/shop-info')
    },
    // 点击轮播图中的商品
    handlerShopItem(item) {
      console.log(item)
    },
    // 商铺评分的五星标准
    imgPath(score) {
      let imgPathArr = []
      while(score>=1) {
        imgPathArr.push(on)
        score--
      }
      if (score>=0.5 && score<1) {
        imgPathArr.push(half)
      }
      while(imgPathArr.length<5) {
        imgPathArr.push(off)
      }
      return imgPathArr
    }
  }
}
</script>

<style lang="scss" scoped>
.scorll-view {
  height: calc(100% - 50px);
  overflow-y: scroll;
  padding-bottom: 10px;
  box-sizing: border-box;
}
.van-icon-search {
  font-size: 19px;
  font-weight: bold;
  color: #fff;
}

.user-circle-o {
  font-size: 20px;
  font-weight: 500;
}
.login-btn {
  color: #fff;
  font-size: 13px;
}

// 首页轮播图
.my-swipe {
  background-color: #fff;
  border-bottom: 1px solid #dfdfdf;
  padding-bottom: 12px;

  .van-swipe-item {
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;

    .shop-item {
      width: 15%;
      margin: 0px 5% 5px;
      // background-color: pink;
      text-align: center;

      img {
        display: block;
        width: 100%;
      }

      p {
        // background-color: red;
        font-size: 12px;
      }
    }
  }
}

/deep/ .van-swipe__indicator {
  background-color: #000;
}

// 商家列表
.menu {
  position: sticky;
  top: 39px;
  z-index: 999;
  background: #fff;

  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  color: #707070;
  font-size: 14px;
  .van-icon {
    font-size: 18px;
    margin-right: 5px;
  }
}
.van-list {
  .van-cell {
    height: 80px;
    padding: 10px;
    // background-color: green;
    /deep/ .van-cell__value {
      display: flex;
      flex-wrap: nowrap;
    }

    .left_img {
      height: 60px;
      width: 60px;
      border-radius: 10px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      margin-right: 10px;
      background-color: #dfdfdf;
    }

    .center_info {
      // 撑满剩余宽度，其他兄弟盒子要有具体的宽度
      flex: 1;
      width: 0;
      height: 100%;
      // background: pink;

      display: flex;
      flex-wrap: wrap;
      align-content: space-between;

      .title {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 14px;
        font-size: 0;
        .icons {
          display: inline-block;
          background-color: #f18010;
          padding: 2px 3px 0;
          font-size: 12px;
          border-radius: 5px;
          color: #333;
          font-weight: bold;
          margin-right: 4px;
          transform: scale(0.7);
        }
        span {
          font-size: 14px;
          font-weight: bold;
        }
      }
      .rate {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: -8px;
        span {
          font-size: 14px;
          margin-right: 4px;
          font-weight: bold;
          color: #f18010;
          white-space: nowrap;
        }
        img {
          transform: scale(0.7);
        }
      }
      .play {
        width: 100%;
        font-size: 12px;
        line-height: 12px;
        color: #444;
      }
    }

    .right_protected {
      width: 60px;
      height: 100%;
      margin-left: 10px;
      text-align: center;
      .top {
        color: #707070;
        display: flex;
        align-items: center;
        justify-content: space-around;
        span {
          display: block;
          border: 1px solid #ccc;
          border-radius: 3px;
          font-size: 12px;
          line-height: 12px;
          transform: scale(0.8);
          // margin: 0 2px;
          padding: 2px;
        }
      }
      .midlle {
        font-size: 12px;
        line-height: 24px;
        transform: scale(0.9);
        -webkit-transform: scale(0.9);
        color: #f18010;
      }
      .bottom {
        font-size: 12px;
        line-height: 18px;
        color: #666;
      }
    }
  }
}

@media screen and (min-width: 751px) {
  .my-swipe {
    padding-bottom: 20px;
    .van-swipe-item {
      flex-wrap: nowrap;
      justify-content: space-around;
      .shop-item {
        width: 7%;
        margin: 0px 0.65% 0;
      }
    }
  }
}
</style>
